import React, { useState } from "react";
import "./style.scss";
import { useDispatch, useSelector } from "react-redux";
import { NavBar, Dialog, Popup, Button, Input, Form } from "react-vant";
import { useNavigate } from "react-router-dom";
import {
  addAddressList,
  defaultAddressList,
  editAddressList,
  removeAddressList,
} from "../../store/modules/user/userActions";
const Index = () => {
  // 收获地址
  const addressList = useSelector((state) => state.user.addressList);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  // 定义弹框状态
  const [visible, setVisible] = useState(false);
  // 当前是编辑还是添加 状态变量
  // true => 编辑
  // false => 添加
  const [isEdit, setIsEdit] = useState(false);

  // 添加
  const handleClickAdd = () => {
    setVisible(true);
    setIsEdit(false);
    form.setFieldsValue({
      nickname: "",
      tel: "",
      address: "",
      id: new Date().getTime().toString(),
    });
  };
  // 删除
  const handleClickRemove = (v) => {
    Dialog.confirm({
      title: "警告",
      message: "确认要删除该项数据吗？",
    })
      .then(() => {
        dispatch(removeAddressList(v));
      })
      .catch(() => {});
  };
  // 编辑
  const handleClickEdit = (v) => {
    setVisible(true);
    setIsEdit(true);
    form.setFieldsValue({
      ...v,
    });
  };
  // 弹框确定
  const handleConfirm = () => {
    if (isEdit) {
      dispatch(editAddressList(form.getFieldsValue()));
    } else {
      dispatch(addAddressList(form.getFieldsValue()));
    }
    setVisible(false);
  };
  // 设置默认
  const handleClickDefault = (v) => {
    Dialog.confirm({
      title: "警告",
      message: "确认要设置为默认地址吗？",
    })
      .then(() => {
        dispatch(defaultAddressList(v));
      })
      .catch(() => {});
  
  };

  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log(values);
  };
  return (
    <div>
      <NavBar
        title="收获地址"
        rightText="添加"
        onClickLeft={() => navigate(-1)}
        onClickRight={() => handleClickAdd()}
      ></NavBar>
      <div>
        {addressList.map((v, i) => {
          return (
            <div key={i} className="address-item">
              <div className="title">
                <span>
                  昵称：{v.nickname}--电话：{v.tel}
                </span>
                <span>{i === 0 ? "默认地址" : ""}</span>
              </div>
              <div className="address">
                <span>地址： {v.address}</span>
                <div>
                  {i !== 0 && (
                    <Button
                      size="mini"
                      type="info"
                      onClick={() => handleClickDefault(v)}
                    >
                      设为默认
                    </Button>
                  )}
                  <Button
                    size="mini"
                    type="primary"
                    onClick={() => handleClickEdit(v)}
                  >
                    编辑
                  </Button>
                  <Button
                    size="mini"
                    type="danger"
                    onClick={() => handleClickRemove(v)}
                  >
                    删除
                  </Button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <Dialog
        onCancel={() => setVisible(false)}
        onConfirm={() => handleConfirm()}
        visible={visible}
        showCancelButton
        title={isEdit ? "编辑" : "添加"}
      >
        <Form form={form} onFinish={onFinish}>
          <Form.Item
            rules={[{ required: true, message: "请填写id" }]}
            name="id"
            label="id"
            noStyle
          ></Form.Item>
          <Form.Item
            rules={[{ required: true, message: "请填写昵称" }]}
            name="nickname"
            label="昵称"
          >
            <Input placeholder="请输入昵称" />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: "请填写电话" }]}
            name="tel"
            label="电话"
          >
            <Input placeholder="请输入电话" />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: "请填写地址" }]}
            name="address"
            label="地址"
          >
            <Input placeholder="请输入地址" />
          </Form.Item>
        </Form>
      </Dialog>
    </div>
  );
};

export default Index;
